/*
==================================
Table of content 
==================================

1. Bootstrap default css
2. Color settings
3. Body
4. Colors
5. Icons
6. Header
7. Main container
8. Footer
9. Buttons
10. Card
11. Form
12. Avatar
13. Carousel
14. Menu
15. Loading
16. List
17. Dark mode
18. RTL
*/
/*!
 * Bootstrap v4.5.2 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
/* background main */
/* background colors */
/* default colors  */
/* Color pallet colors */
/* app defined variables */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

   
}

.btn.colorsettings2 {
  vertical-align: middle;
  border-radius: 30px;
  padding: 0px;
  height: 38px;
  width: 38px;
  text-align: center;
  line-height: 32px;
  float: right;
}

.btn.colorsettings2 span {
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
}

/* sidebar */
.color-picker {
  max-width: 100%;
  position: fixed;
  right: 10px;
  left: 10px;
  margin: 0 auto;
  top: auto;
  bottom: -100%;
  border-radius: 15px;
  padding: 15px;
  overflow-y: auto;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
}

.color-picker.active {
  bottom: 15px;
}

/* Color select */
.colorselect,
.colorselect2 {
  margin: 0;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border-radius: 24px;
  overflow: hidden;
  border: 4px solid transparent;
}

.colorselect input[type="radio"],
.colorselect2 input[type="radio"] {
  display: none;
}

.colorselect input[type="radio"] + label,
.colorselect2 input[type="radio"] + label {
  display: block;
  height: 34px;
  line-height: 34px;
  width: 34px;
  color: #ffffff;
  margin-bottom: 0;
  cursor: pointer;
  border-radius: 4px;
  border: 3px solid rgba(255, 255, 255, 0);
}

.colorselect input[type="radio"] + label i,
.colorselect2 input[type="radio"] + label i {
  font-size: 16px;
  display: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  background-color: #6d32a5;
  vertical-align: middle;
}

.colorselect input[type="radio"]:checked + label,
.colorselect2 input[type="radio"]:checked + label {
  border: 4px solid rgba(0, 0, 0, 0.5);
  border-radius: 30px;
}

.colorselect input[type="radio"]:checked + label i,
.colorselect2 input[type="radio"]:checked + label i {
  display: inline-block;
}

.colorselect.active,
.colorselect2.active {
  position: relative;
  border: 4px solid rgba(0, 0, 0, 0.1);
}

.selectoption {
  margin: 0 5px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  border-radius: 20px;
  text-align: center;
  background-color: #ffffff;
  min-width: 80px;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
}

.selectoption input[type="checkbox"] {
  display: none;
}

.selectoption input[type="checkbox"] + label {
  display: block;
  height: 34px;
  line-height: 26px;
  padding: 0 15px;
  width: auto;
  color: #666666;
  margin-bottom: 0;
  cursor: pointer;
  border-radius: 18px;
  border: 4px solid rgba(255, 255, 255, 0);
}

.selectoption input[type="checkbox"]:checked + label {
  color: #ffffff;
  background-color: #000000;
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.selectoption input[type="checkbox"]:checked + label i {
  display: inline-block;
}

.selectoption.active {
  position: relative;
  border: 2px solid rgba(0, 0, 0, 0.1);
}



.bg-dark-pink {
  background-color: #e92063;
}

.bg-dark-brown {
  background-color: #795448;
}

.bg-dark-green {
  background-color: #00b491;
}

.bg-red {
  background-color: #f94620;
}

.bg-pink {
  background-color: #e91e63;
}

.bg-purple {
  background-color: #6121d2;
}

.bg-blue {
  background-color: #143be0;
}

.bg-teal {
  background-color: #00bcd4;
}

.bg-skyblue {
  background-color: #0faff7;
}

.bg-amber {
  background-color: #ffc107;
}

.bg-gray {
  background-color: #607d8b;
}

.bg-slate {
  background-color: #22262b;
  color: #ffffff;
}

body {
  background-color: #6d32a5;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 20px;
}